<template>
  <section>
    <transition enter-active-class="animate__animated animate__fadeIn" mode="out-in">
      <section>
        <!-- 查询表单 -->
        <ZyTableQueryForm
          v-model:ruleForm="query.params"
          :rules="queryRule"
          @query="goPage(1)"
          @reset="goReset"
        >
          <!-- <el-form-item prop="app">
            <el-input v-model="query.params.app" clearable placeholder="App 名称查询" />
          </el-form-item> -->
        </ZyTableQueryForm>


        <!-- 数据表格 -->
        <el-table
          :data="tableData"
          border
          stripe
          style="width: 100%"
          @sort-change="handleSortChange"
          @selection-change="handleSelectionChange"
          row-key="app"
          :expand-row-keys="expandedRowKeys"
        >
          <el-table-column type="selection" align="center" />
           <!-- 序号列 -->
          <el-table-column type="index" label="序号" width="60" align="center"/>
          <el-table-column prop="http.port" label="HTTP 监听端口" align="center" width="120" show-overflow-tooltip />
          <el-table-column prop="http.allow_ip_range" label="允许访问的 IP 范围" align="center" width="100" show-overflow-tooltip />
          <el-table-column prop="rtmp.port" label="RTMP 服务端口（默认 1935）" align="center" width="120" show-overflow-tooltip />
          <el-table-column prop="rtsp.port" label="RTSP 服务端口（默认 554）" align="center" width="120" show-overflow-tooltip />
          <el-table-column prop="rtc.port" label="WebRTC UDP 端口" align="center" width="120" show-overflow-tooltip />
          <el-table-column prop="rtc.tcpPort" label="WebRTC TCP 端口" align="center" width="120" show-overflow-tooltip />
          <el-table-column prop="general.listen_ip" label="服务监听的 IP" align="center" header-align="center" width="250" show-overflow-tooltip />
          <el-table-column prop="api.secret" label="流媒体唯一键" align="center" header-align="center" width="250" show-overflow-tooltip />

        </el-table>

        <ZyElPagination
          v-model:currentPage="query.pagination.current"
          v-model:pageSize="query.pagination.pageSize"
          :total="tempData.total"
        />

      </section>
    </transition>
  </section>
</template>

<script>
import { reactive, ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import api from '@/api/axios.js'

export default {
  name: 'YourComponentName',

  data() {
    return {
      query: reactive({
        params: { app: '' },
        pagination: { current: 1, pageSize: 10 }
      }),
      queryRule: reactive({}),
      tempData: reactive({ total: 0 }),

      dialogVisible: false,
      form: reactive({ key: '' }),

      adddialogVisible: false,
      addform: reactive({ rtspUrl: '' }),

      expandedRowKeys: ref([]),

      tableData: ref([]),
    }
  },

  methods: {

async getData() {
  try {
    const res = await api.post('/getServerConfig')
    const data = res.data || []
    const { current, pageSize } = this.query.pagination
    const filtered = data.filter(item => !this.query.params.app || item.app?.includes(this.query.params.app))
    this.tempData.total = filtered.length
    this.tableData = filtered.slice((current - 1) * pageSize, current * pageSize)
    this.expandedRowKeys = []
  } catch (err) {
    console.error('获取数据失败', err)
    // 请求失败时清空数据
    this.tableData = []
    this.tempData.total = 0
    this.expandedRowKeys = []
  } finally {
  }
},


    goPage(page) {
      this.query.pagination.current = page
      this.getData()
    },

    goReset() {
      this.query.params.app = ''
      this.query.pagination.current = 1
      this.getData()
    },

  },

  mounted() {
    this.getData()
  }
}
</script>
